.ui-pager { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.ui-pager > li { margin-left: .06rem; }
.ui-pager > li:first-of-type { margin-left: 0; }
.ui-pager > li > a { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; min-width: .3rem; height: .3rem; padding-left: .06rem; padding-right: .06rem; -webkit-border-radius: .04rem; border-radius: .04rem; color: #333; font-size: .16rem; line-height: .3rem; font-weight: 500; text-align: center; background-color: #fafafa; -webkit-transition: color .2s, background-color .2s, -webkit-transform .2s linear; transition: color .2s, background-color .2s, -webkit-transform .2s linear; -o-transition: color .2s, background-color .2s, transform .2s linear; transition: color .2s, background-color .2s, transform .2s linear; transition: color .2s, background-color .2s, transform .2s linear, -webkit-transform .2s linear; }
.ui-pager > li > a:hover,
.ui-pager > li > a:active,
.ui-pager > li.current > a { color: #fff; background-color: #6177ca; }
.ui-pager > li.prev > a,
.ui-pager > li.next > a { position: relative; text-indent: -999em; }

.ui-pager > li.prev > a::after,
.ui-pager > li.next > a::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: .1rem;
    height: .1rem;
    margin: auto;
    border-top: 2px solid #666;
    border-right: 2px solid #666;
    -webkit-border-radius: 2px;
            border-radius: 2px;
    -webkit-transition: border-color .2s;
    -o-transition: border-color .2s;
    transition: border-color .2s;
    }
.ui-pager > li.prev > a::after { -webkit-transform: translateX(3px) translateY(-1px) rotate(-135deg); -ms-transform: translateX(3px) translateY(-1px) rotate(-135deg); transform: translateX(3px) translateY(-1px) rotate(-135deg); }
.ui-pager > li.next > a::after { -webkit-transform: translateX(-3px) translateY(-1px) rotate(45deg); -ms-transform: translateX(-3px) translateY(-1px) rotate(45deg); transform: translateX(-3px) translateY(-1px) rotate(45deg); }
.ui-pager > li.prev > a:hover,
.ui-pager > li.prev > a:active { -webkit-transform: translateX(-3px); -ms-transform: translateX(-3px); transform: translateX(-3px); }
.ui-pager > li.next > a:hover,
.ui-pager > li.next > a:active { -webkit-transform: translateX(3px); -ms-transform: translateX(3px); transform: translateX(3px); }
.ui-pager > li.prev > a:hover::after,
.ui-pager > li.prev > a:active:after,
.ui-pager > li.next > a:hover::after,
.ui-pager > li.next > a:active::after { border-color: #fff; }
.ui-pager > li.disabled > a { color: #ccc; background-color: #dedede; cursor: not-allowed; }
.ui-pager > li.prev.disabled > a { -webkit-transform: none; -ms-transform: none; transform: none; }
.ui-pager > li.prev.disabled > a::after,
.ui-pager > li.next.disabled > a::after { border-color: #ccc; }
